<template>
	<view class="content">
		<view class="search">
			<view class="search-nik">
				<u-icon name="search" style="margin: -5rpx 20rpx 0 20rpx;" color="#999999" size="34"></u-icon>
				<input type="text" :value="searchKey" placeholder="输入城市名或拼音" @input="search"/>
			</view>
		</view>
		<view class="title">定位</view>
		<view class="orientation">
			<view class="orientation-nik">
				<view class="orientation-item" @click="setarea">
					<image src="../../../static/img/dingwei.png" style="width: 32rpx;height: 32rpx;margin: 0 8rpx 0 0;" mode=""></image>
					<!-- <u-icon name="map" style="margin: 0 8rpx 0 0;" color="#333" size="34"></u-icon> -->
					<span>{{address}}</span>
				</view>
				<view @click="getLocations">重新定位</view>
			</view>
		</view>
		<view class="title">热门城市</view>
		<view class="hot">
			<view class="hot-nik">
				<view v-for="(item, index) in one" :key="index" @click="oneClick(item)">
					<view class="hot-item">{{item}}</view>
				</view>
			</view>
			<view class="hot-nik">
				<view v-for="(item, index) in two" :key="index" @click="oneClick(item)">
					<view class="hot-item">{{item}}</view>
				</view>
			</view>
			<view class="hot-nik">
				<view v-for="(item, index) in three" :key="index" @click="oneClick(item)">
					<view class="hot-item">{{item}}</view>
				</view>
			</view>
		</view>
		<view v-if="show">
			<view class="list">
				<view class="list-nik">
					<view v-for="(item, index) in province" :key="item.value">
						<view class="list-item" @click="itemClick(index, item.label)">
							<span>{{item.label}}</span>
							<u-icon v-if="item.label != '北京' && item.label != '上海' && item.label != '天津' && item.label != '重庆'" name="arrow-right" color="#BFBFBF" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<search :searchKey="searchKey" @search-click="searchClick"></search>
		</view>
	</view>
</template>

<script>
	import province from '../../../utils/province.js'
	import search from './components/search.vue'
export default {
	components: {
		search
	},
	data() {
		return {
			province: province,
			address: '',
			one: ['北京', '上海', '广州', '深圳'],
			two: ['重庆', '成都', '杭州', '天津'],
			three: ['南京', '苏州', '武汉', '西安'],
			show: true,
			searchKey: ''
		}
	},
	methods: {
		getLocations() {
			let self = this
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					// 经度
					self.$store.commit('setLongitude', res.longitude);
					// 纬度
					self.$store.commit('setLatitude', res.latitude);
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo?key=f797b843ae3f8b8d65b9ea2b393d0f0d&location=' + res.longitude + ',' + res.latitude,
						method: 'GET',
						success: ret => {
							console.log(ret)
							self.address = ret.data.regeocode.addressComponent.city
						}
					});
				},
				fail: err => {
					if(err.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF'){
						uni.showToast({
							title: '请打开定位服务',
							icon: 'none',
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '请勿频繁刷新',
							icon: 'none',
							duration: 1000
						});
					}
				}
			});
		},
		itemClick (index, value) {
			// 0 、1、8、21
			if (index === 0 || index === 1 || index === 8 || index === 21) {
				this.address = value
				uni.setStorageSync('address',value)
				uni.navigateBack({
					delta: 1
				})
			} else {
				uni.navigateTo({
					url: './components/city?index=' + index
				})
			}
		},
		oneClick (item) {
			this.address = item
			uni.setStorageSync('address',item)
			uni.navigateBack({
				delta: 1
			})
		},
		twoClick (item) {
			this.address = item
			uni.setStorageSync('address',item)
			uni.navigateBack({
				delta: 1
			})
		},
		threeClick (item) {
			this.address = item
			uni.setStorageSync('address',item)
			uni.navigateBack({
				delta: 1
			})
		},
		search (e) {
			this.searchKey = e.detail.value
			if (this.searchKey) {
				this.show = false
			} else {
				this.show = true
			}
		},
		setarea(){
			uni.removeStorageSync('address');
		},
		searchClick (item) {
			this.address = item
		},
		// 逆地理解析
		getLocation (address) {
			uni.request({
			    url: 'https://restapi.amap.com/v3/geocode/geo?key=f797b843ae3f8b8d65b9ea2b393d0f0d&address=' + address,
				method: 'GET',
			    success: (res) => {
			        console.log(res.data);
					// this.address = res.data.regeocode.addressComponent.city
			    }
			})
		}
	},
	onLoad (option) {
		console.log(option)
		if (option.address) {
			this.address = option.address
		}
	},
	watch: {
		'address' () {
			this.$store.commit('setAddress', this.address)
			uni.request({
			    url: 'https://restapi.amap.com/v3/geocode/geo?key=f797b843ae3f8b8d65b9ea2b393d0f0d&address=' + this.address,
				method: 'GET',
			    success: (res) => {
					let longitude = res.data.geocodes[0].location.split(',')[0]
					let latitude = res.data.geocodes[0].location.split(',')[1]
					// 经度
					this.$store.commit('setLongitude', longitude)
					// 纬度
					this.$store.commit('setLatitude', latitude)
			    }
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.list-item{
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 2rpx solid #EEEEEE;
	}
	.list-nik{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.list{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.hot-item{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 60rpx;
		width: 140rpx;
		height: 60rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	.hot-nik{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.hot{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.orientation-item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		padding: 10rpx 20rpx;
		border-radius: 15rpx;
		border: 3rpx solid #DDDDDD;
		font-size: 28rpx;
		color: #333;
		
	}
	.orientation-nik{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin: 25rpx 0;
	}
	.orientation{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		position: sticky;
		top: 100rpx;
		left: 0;
		z-index: 1;
	}
	.title{
		width: 100%;
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}
	.search-nik{
		width: 700rpx;
		height: 80rpx;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin: 20rpx 0;
		border-radius: 10rpx;
		input{
			width: 610rpx;
		}
	}
	.search{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx 0 30rpx;
}
</style>
